﻿<!DOCTYPE html>
<html>

	<head lang="en">
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>时间</title>
		<link rel="stylesheet" type="text/css" href="preview/css/reset.css" />
		<style type="text/css">
			.serviceTime{
				width: 2rem;
				height: .58rem;
			}
			.wrap{
				position: relative;
			}
			.wrap p{
				position: absolute;
				left: 0;
				width: 100%;
				text-align: center
			}
			.date{
				top: 0;
				font-size: .18rem;
			}
			.time{
				bottom: 0;
				font-size: .4rem;
			}
		</style>
	</head>

	<body>
		<div class="serviceTime">
			<div class="wrap">
				<p class="date"></p>
				<p class="time"></p>
			</div>
		</div>
	</body>
	<script src="preview/js/jquery.min.js"></script>
	<script src="preview/js/rem.js"></script>
	<script>
		window.onresize = function() {
			getRem(100, 200);
		};
		window.onload = function() {
			getRem(100, 200);
			startTime();
			
			function startTime() {
				if(!!window.startTime_timer) cancelAnimationFrame(window.startTime_timer);
				var today = new Date(); //定义日期对象
				var ss = today.getSeconds(); //通过日期对象的getSeconds方法返回秒
				var yyyy = today.getFullYear(); //通过日期对象的getFullYear()方法返回年
				var MM = today.getMonth() + 1; //通过日期对象的getMonth()方法返回年
				var dd = today.getDate(); //通过日期对象的getDate()方法返回年
				var hh = today.getHours(); //通过日期对象的getHours方法返回小时
				var mm = today.getMinutes(); //通过日期对象的getMinutes方法返回分钟
				// 如果分钟或小时的值小于10，则在其值前加0，比如如果时间是下午3点20分9秒的话，则显示15：20：09
				MM = checkTime(MM);
				dd = checkTime(dd);
				mm = checkTime(mm);
				ss = checkTime(ss);
				var day; //用于保存星期（getDay()方法得到星期编号）
				if(today.getDay() == 0) day = "星期日 "
				if(today.getDay() == 1) day = "星期一 "
				if(today.getDay() == 2) day = "星期二 "
				if(today.getDay() == 3) day = "星期三 "
				if(today.getDay() == 4) day = "星期四 "
				if(today.getDay() == 5) day = "星期五 "
				if(today.getDay() == 6) day = "星期六 "
				$(".date").text(yyyy + "年" + MM + "月" + dd + "日 " + day);
				$(".time").text(checkTime(hh) + ":" + mm + ":" + ss);
				window.startTime_timer = requestAnimationFrame(startTime);
			}

			function checkTime(i) {
				if(i < 10) {
					i = "0" + i;
				}
				return i;
			} //判断是否小于0

		}
	</script>

</html>